<template>
  <div class="box">
    <form>
      <!-- 用户名输入框，双向绑定 user.name -->
      <input type="text" name="name" v-model="user.name">
      <!-- 密码输入框，双向绑定 user.pwd -->
      <input type="text" name="pwd" v-model="user.pwd">
      <br><br>
      <!-- 城市下拉选择框，双向绑定 user.city -->
      <select v-model="user.city">
        <option value="合肥">合肥</option>
        <option value="南京">南京</option>
        <option value="上海">上海</option>
      </select>
      <br><br>
      <!-- 点击按钮触发 getCity 方法 -->
      <button @click="getCity">获取心仪城市</button>
    </form>
    <!-- 展示最终结果：用户名 -- 密码 -- 选择的城市 -->
    <h3>{{ user.name }} -- {{ user.pwd }} -- {{ user.city }}</h3>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

// 定义响应式对象 user，包含 name、pwd、city 三个属性
let user = reactive({
  name: 'zs',   // 初始用户名
  pwd: '123',   // 初始密码
  city: '南京'  // 初始城市
})

// 按钮点击事件的处理函数
const getCity = () => {
  console.log('已选择心仪城市：', user.city)
  // 此处可添加更多业务逻辑（如接口请求等），v-model 已自动保证数据双向同步
}
</script>

<style scoped>
/* 简单样式优化，让界面更贴近示例图 */
input {
  width: 220px;
  padding: 6px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}
select {
  padding: 6px;
  margin-bottom: 10px;
}
button {
  padding: 12px 30px;
  background-color: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}
h3 {
  font-size: 24px;
  color: #333;
  margin-top: 20px;
}
</style>